<template>
  <main-layout>
    <div class="main">
        <!-- <van-sidebar v-model="activeKey">
            <van-sidebar-item v-for="it in typesList" :key="it.id" 
            :title="it.name" 
            @click="typesBtn(it.id)"/>
        </van-sidebar> -->
        <div v-for="it in typesList" :key="it.id" class="typesList">
            <van-image
            width="10rem"
            height="10rem"
            fit="contain"
            :src="it.imageUrl"
            />
            <p>{{it.name}}</p>
        </div>
    </div>
    </main-layout>
</template>

<script>
import {typesApi} from "../../apis/homeApi.js"
// import Vue from 'vue';
// import { Sidebar, SidebarItem } from 'vant';
// Vue.use(Sidebar);
// Vue.use(SidebarItem);

    export default {
        data(){
            return{
                // activeKey: 0,
                typesList: [],
                productlist:[],
                
            }
        },

         created() {
              typesApi().then((data) => {
                if (data.code === 200) {
                    let arr = data.data.list.map((it) => {
                    // console.log(it)
                    return it;
                    });
                    this.typesList = arr;
                    console.log(arr);
                    // return productlistApi(this.id)
                }
            })
            // .then(data => {
            //     if( data.code == 200){
            //         console.log(data);
            //     }
            // })
            // let id = this.$route.query.id
            // console.log(id);
            // productlistApi(id).then((data)=> {
            //     if (data.code === 200) {
            //         let list = data.data.list.map((item) => {
            //         // console.log(item)
            //         return item;
            //         });
            //         this.productlist = list;
            //         console.log(list);
            //         // debugger
            //     }
            // })
         },

         methods: {
             async typesBtn(id) {
                console.log(id)
                this.$router.push({query: {id:id}}) 

            } 
        },


    }
    
</script>

<style lang="less" scoped>
    .main{
        height: 800px;
        overflow: auto;
        .typesList{
        float: left;
        margin-left: 25px;
        
        }
    }
    
</style>